<div class="bd-content">
<h1 class="bd-title" id="content">浮动（float）</h1>
          <p class="bd-lead">使用我们的响应式浮动工具，可以在任何断点上切换浮动任何元素。</p>
          <h2 id="overview">概览</h2>

<p>这些工具向左或向右浮动元素，可以根据当前 viewport 大小禁用浮动 CSS float 。增加属性 <code class="highlighter-rouge">!important</code> 可以以避免例外情况。 它们使用与我们的网格系统相同的 viewport 断点。 请注意，浮动工具对 flex 没有影响。</p>

<h2 id="classes">类</h2>

<p>用类切换浮动属性:</p>

<div class="bd-example">
<div class="float-left">Float left on all viewport sizes</div><br />
<div class="float-right">Float right on all viewport sizes</div><br />
<div class="float-none">Don't float on all viewport sizes</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"float-left"</span><span class="nt">&gt;</span>Float left on all viewport sizes<span class="nt">&lt;/div&gt;&lt;br&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"float-right"</span><span class="nt">&gt;</span>Float right on all viewport sizes<span class="nt">&lt;/div&gt;&lt;br&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"float-none"</span><span class="nt">&gt;</span>Don't float on all viewport sizes<span class="nt">&lt;/div&gt;</span></code></pre></figure>

<h2 id="mixins">Mixins</h2>

<p>或者通过Sass mixin：</p>

<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.element</span> <span class="p">{</span>
  <span class="k">@include</span> <span class="nd">float-left</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.another-element</span> <span class="p">{</span>
  <span class="k">@include</span> <span class="nd">float-right</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.one-more</span> <span class="p">{</span>
  <span class="k">@include</span> <span class="nd">float-none</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>

<h2 id="responsive">响应</h2>

<p>每种情况也存在反应性变化<code class="highlighter-rouge">float</code> 值。</p>

<div class="bd-example">
<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br />
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br />
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br />
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br />
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"float-sm-left"</span><span class="nt">&gt;</span>Float left on viewports sized SM (small) or wider<span class="nt">&lt;/div&gt;&lt;br&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"float-md-left"</span><span class="nt">&gt;</span>Float left on viewports sized MD (medium) or wider<span class="nt">&lt;/div&gt;&lt;br&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"float-lg-left"</span><span class="nt">&gt;</span>Float left on viewports sized LG (large) or wider<span class="nt">&lt;/div&gt;&lt;br&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"float-xl-left"</span><span class="nt">&gt;</span>Float left on viewports sized XL (extra-large) or wider<span class="nt">&lt;/div&gt;&lt;br&gt;</span></code></pre></figure>

<p>以下是所有支持类：</p>

<ul>
  <li><code class="highlighter-rouge">.float-left</code></li>
  <li><code class="highlighter-rouge">.float-right</code></li>
  <li><code class="highlighter-rouge">.float-none</code></li>
  <li><code class="highlighter-rouge">.float-sm-left</code></li>
  <li><code class="highlighter-rouge">.float-sm-right</code></li>
  <li><code class="highlighter-rouge">.float-sm-none</code></li>
  <li><code class="highlighter-rouge">.float-md-left</code></li>
  <li><code class="highlighter-rouge">.float-md-right</code></li>
  <li><code class="highlighter-rouge">.float-md-none</code></li>
  <li><code class="highlighter-rouge">.float-lg-left</code></li>
  <li><code class="highlighter-rouge">.float-lg-right</code></li>
  <li><code class="highlighter-rouge">.float-lg-none</code></li>
  <li><code class="highlighter-rouge">.float-xl-left</code></li>
  <li><code class="highlighter-rouge">.float-xl-right</code></li>
  <li><code class="highlighter-rouge">.float-xl-none</code></li>
</ul>
</div>